<template>
	<div class="appointment1edit">
		<div class="cjjTitle">修改 美食预约</div>
		<div class="detail">
			<div style="height: 70px;">
				<p class="inpBox"><span class="star">*</span> <span>名称：</span>
					<el-input class="inp" @blur="loseFcs" v-model="input" placeholder="请输入美食名称"></el-input>
				</p>
				<p v-show="isShow" class="tips">请输入你的美食名称</p>
			</div>
			<div class="uploadBox">
				<el-upload
  class="upload-demo"
  action=""
  :on-change='changeUpload' 
  :on-preview="handlePreview"
  :on-remove="handleRemove"
  :file-list="fileList1"
  list-type="picture">
  <el-button size="small" type="primary">点击上传</el-button>
  <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且只能上传一张不超过5M</div>
</el-upload>
			</div>
			<div class="postBtn">
				<el-button @click="upLoad" :class="btnStyle" :loading="isUpload" round>{{btnName}}</el-button>
			</div>
		</div>
	</div>
</template>

<script>
	import config from '@/assets/js/config.js'
	export default {
		data() {
			return {
				input: '',
				isShow: false,
				fileList: [],
				isUpload:false,
				btnStyle:'primary',
				btnName:'确认上传',
				token:'',
				fileList1:[],
				baseUrl:config.baseUrl,
				imgData:''
}
},
created() {
	this.getData();
	},
	methods: {
		getData(){
			this.$require.get(config.editAppointment3,{
				params:{
					id:this.$route.query.id
				}
			}).then((res)=>{
   			console.log(res);
   			this.input = res.data.data.name;
   			this.fileList1 = [{url:this.baseUrl+res.data.data.img_url}]
   		}).catch(function(err){
   			console.log("fail");
   		})
		},
		loseFcs() {
			if(this.input == '') {
				this.isShow = true;
			} else {
				this.isShow = false;
			}
		},
		upLoad() {
			this.$submit.post(config.updateAppointment3,{
				img_url:this.imgData,
				name:this.input,
				id:this.$route.query.id
			}).then((res)=>{
				console.log(res);
				this.$router.push({
					name:"appointment3"
				});
			}).catch(function(err){
				console.log("fail");
			})
		},
		handleRemove(file, fileList) {
			console.log(file, fileList);
		},
		handlePreview(file) {
			console.log(file);
		},
		changeUpload(file, fileList){
			var formData = new FormData();
				formData.append("files",file.raw);
				this.$submit.post(config.upImg,formData).then(res=>{
					console.log(res);
					var imgUrl = {};
					imgUrl = [{url:this.baseUrl+res.data.data.img_url}];
					console.log(imgUrl);
					this.fileList1 = imgUrl;
					this.imgData=res.data.data.img_url;
				}).catch(function(err){
					console.log("fail");
				})
		}
	}
}
</script>
<style lang="scss">
	.appointment1edit {
		min-width: 1200px;
		height: 100%;
		overflow: auto;
		margin-top: 5px;
		text-align: left;
		box-sizing: border-box;
		padding-left: 25px;
		.cjjTitle{
			font-size: 36px;
			font-weight: bold;
		}
		.detail {
			width: 90%;
			margin: 0 auto;
			margin-top: 20px;
			box-sizing: border-box;
			padding-left: 30px;
			.inpBox {
				display: flex;
				align-items: center;
				.star {
					color: red;
					padding-right: 5px;
				}
				span {
					white-space: nowrap;
				}
				.inp {
					.el-input__inner {
						border-radius: 10px;
						outline: none;
						font-size: 14px;
					}
				}
			}
			.tips {
				font-size: 12px;
				margin-top: 5px;
				padding-left: 50px;
				color: red;
			}
			.postBtn{
				margin-top: 20px;
				.primary{
					background: #006699;
					color: white;
				}
				.primary:hover{
					color:#CCFFFF;
					background:#333399
				}
				.success{
					background: #99CC00;
					color: #CCFFCC;
				}
			}
		}
	}
</style>
